<div class="container gray-background">
  <header #header>
    <i class="back" (click)="goBack()"></i>
    <p>选择城市</p>
  </header>

  <div class="nav" #nav>
    <nav class="seed-underline">
      <p [class.active]="currentTab==='province'"  (click)="currentTab='province'">{{currentInfo.provinceName||'请选择'}}</p>
      <p [class.active]="currentTab==='city'" (click)="currentTab='city'">{{currentInfo.cityName||''}}</p>
    </nav>
  </div>
  <div class="content" #content id="content">
    <ul class="provinces">
      <li *ngFor="let province of provinces"
          [class.active]="province.areaId===currentInfo.provinceId"
          (click)="pickProvince(province)">
        {{province.title}}
      </li>
    </ul>
    <ul class="city" [class.show]="currentTab==='city'">
      <li *ngFor="let city of citys"  [class.active]="city.areaId===currentInfo.cityId" (click)="handleCity(city)">
        {{city.title}}
      </li>
    </ul>
  </div>
</div>
